<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
			<!-- 搜索组件 -->
			<view class="gui-city-search gui-bg-gray" id="hSearch">
				<gui-search @clear="search" @inputting="search"></gui-search>
			</view>
			<view class="gui-padding gui-margin-top">
				<text class="gui-h6 gui-block-text gui-primary-color">当前城市 : {{currentCity}}</text>
			</view>
			<!-- 城市列表 -->
			<scroll-view :scroll-y="true" :scroll-into-view="showCityId" :scroll-with-animation="true"
				:style="{height:mainHeight+'px'}">
				<view class="gui-padding" id="pageTop">
					<text class="gui-h6 gui-block-text gui-primary-color" style="padding-bottom:10rpx;">热门城市</text>
					<view class="gui-flex gui-rows gui-wrap gui-space-between"
						style="padding-bottom:10rpx; padding-right:30rpx;">
						<text class="hotcity-item gui-block-text" v-for="(item, index) in hotCities" :key="index"
							:data-cityname="item.name" :data-citycode="item.code" @tap="chooseCity">{{item.name}}</text>
					</view>
					<block v-for="(cities, index) in cityData" :key="index">
						<text class="gui-city-AZ gui-block-text" :id="'gui-city-AZ-'+index">{{index}}</text>
						<text class="city-item gui-block-text gui-border-b" :id="'gui-city-list-'+city.code"
							v-for="(city, cindex) in cities" :key="cindex" :data-cityname="city.name"
							:data-citycode="city.code" @tap="chooseCity">{{city.name}}</text>
					</block>
				</view>
			</scroll-view>
			<view class="gui-city-AZ-right">
				<text class="gui-city-AZ-right-item gui-block-text gui-transition-all" v-for="(char, index) in AZ"
					:key="index"
					:class="[rightTapIdx == index ? 'gui-bg-black' : '', rightTapIdx == index ? 'gui-color-white' : '']"
					:data-char="char" :data-idx="index" @tap="changAZ">{{char}}</text>
			</view>
		</view>
	</gui-page>
</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	var dataObj = require('@/GraceUI5/data/cityData.js');
	export default {
		data() {
			return {
				// 全屏 loading
				pageLoading: true,
				// 核心区域高度 
				mainHeight: 200,
				cityData: dataObj.cityData,
				AZ: dataObj.AZ,
				currentCity: "北京市",
				hotCities: [{
						code: 110000,
						name: "北京市"
					},
					{
						code: 310000,
						name: "上海市"
					},
					{
						code: 330100,
						name: "杭州市"
					},
					{
						code: 610100,
						name: "西安市"
					},
					{
						code: 120000,
						name: "天津市"
					},
					{
						code: 420100,
						name: "武汉市"
					}
				],
				showCityId: '',
				searchTimer: null,
				searchIndex: -1,
				rightTapIdx: -1
			}
		},
		onLoad: function(query) {
			// 计算页面主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					this.mainHeight = e.height - uni.upx2px(120);
					this.pageLoading = false;
				});
			});
			
			if(typeof query.default_city!='undefined'){
				// 解码URL参数中的中文城市名称
				this.currentCity = decodeURIComponent(query.default_city);
			}
		},
		methods: {
			// 选择
			chooseCity: function(e) {
				// 数据保存在 cityname 和 citycode
				var cityname = e.currentTarget.dataset.cityname;
				var citycode = e.currentTarget.dataset.citycode;
				
				// 保存选择的城市到本地存储
				uni.setStorageSync('selected_city', cityname);
				uni.setStorageSync('selected_citycode', citycode);
				
				// 显示选择成功提示
				uni.showToast({
					title: "已选择 " + cityname,
					icon: "success",
					duration: 1500
				});
				
				// 延迟后跳转回首页并传递城市参数
				setTimeout(() => {
					uni.navigateBack({
						success: () => {
							// 如果navigateBack成功，说明是从首页跳转过来的
							// 通过事件总线或者页面间通信传递数据
							getApp().globalData.selectedCity = cityname;
						},
						fail: () => {
							// 如果navigateBack失败，直接跳转到首页
							uni.reLaunch({
								url: '/pages/index/index?city=' + encodeURIComponent(cityname)
							});
						}
					});
				}, 1500);
				
				this.currentCity = cityname;
			},
			// 搜索
			search: function(k) {
				k = k.toLowerCase();
				if (k == '') {
					this.showCityId = 'pageTop';
					return;
				}
				if (this.searchTimer != null) {
					clearTimeout(this.searchTimer);
				}
				this.searchTimer = setTimeout(() => {
					this.searchBase(k);
				}, 500);
			},
			searchBase: function(k) {
				this.searchIndex = -1;
				for (var i in this.cityData) {
					for (var ii = 0; ii < this.cityData[i].length; ii++) {
						if (this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0) {
							this.searchIndex = this.cityData[i][ii].code;
							break;
						}
					}
					if (this.searchIndex != -1) {
						break;
					}
				}
				if (this.searchIndex != -1) {
					this.showCityId = 'gui-city-list-' + this.searchIndex;
				}
			},
			// 点击切换
			changAZ: function(e) {
				this.rightTapIdx = -1;
				var char = e.currentTarget.dataset.char;
				this.showCityId = 'gui-city-AZ-' + char;
				this.rightTapIdx = e.currentTarget.dataset.idx;
				setTimeout(() => {
					this.rightTapIdx = -1;
				}, 2000);
			}
		}
	}
</script>
<style>
	.gui-h6 {
		line-height: 66rpx;
	}

	.gui-city-search {
		padding: 20rpx 100rpx;
	}

	.gui-city-AZ {
		font-weight: 700;
		line-height: 88rpx;
		font-size: 30rpx;
	}

	.gui-city-AZ-right {
		width: 50rpx;
		position: fixed;
		right: 0;
		top: 80px;
	}

	/* #ifdef H5 */
	.gui-city-AZ-right {
		top: 110px;
	}

	/* #endif */
	.gui-city-AZ-right-item {
		line-height: 38rpx;
		height: 38rpx;
		width: 38rpx;
		border-radius: 40rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.hotcity-item {
		width: 210rpx;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		text-align: center;
		overflow: hidden;
		margin: 8rpx 5rpx;
		background-color: #F6F7F8;
	}

	.city-item {
		line-height: 88rpx;
		height: 88rpx;
		font-size: 26rpx;
	}
</style>